<template>
  <h2>CustomRef的使用</h2>
  <hr />
  <input type="text" v-model="keyword" />
  <p>{{ keyword }}</p>
</template>
<script lang="ts">
import { customRef, defineComponent, ref } from "vue";
// 自定义hook防抖函数
// value 传入的函数，将来数据的类型不确定，delay防抖的间隔时间
function useDebouncedRef<T>(value: T, delay = 200) {
  // 准备一个存储定时器的id的变量
  let timeOutId: number;
  return customRef((track, trigger) => {
    return {
      // 返回数据
      get() {
        // 告诉Vue追踪数据
        track();
        return value;
      },
      // 设置数据的
      set(newVal: T) {
        // 清理定时器
        clearTimeout(timeOutId);
        // 开启定时器
        timeOutId = setTimeout(() => {
          value = newVal;
          // 告诉Vue更新界面
          trigger();
        }, delay);
      },
    };
  });
}
export default defineComponent({
  name: "App",
  setup() {
    // const keyword = ref("abc");
    const keyword = useDebouncedRef("abc", 500);
    return { keyword };
  },
});
</script>